<!-- 
  @name: 设备详情
  @date: 2020.4.2
 -->
<template>
	<view class="content">
		<!-- 基本信息 -->
		<view class="cardview">
			<view class="title" v-if="macStatus !== 0">基本信息</view>
			<view class="title t2" v-if="macStatus === 0">
				<text class="left">基本信息</text>
				<view class="btn" @tap="editMac">编辑</view>
				<view class="btn b2" @tap="delMac">删除</view>
			</view>
			<view class="item">
				<text class="left">设备出厂编码</text>
				<text>{{ info.macCode }}</text>
			</view>
			<view class="item">
				<text class="left">设备型号</text>
				<text>{{ info.macType }}</text>
			</view>
			<view class="item">
				<text class="left">设备开发名称</text>
				<text>{{ info.deviceName }}</text>
			</view>
			<view class="item">
				<text class="left">设备开发密钥</text>
				<text>{{ info.deviceSecret }}</text>
			</view>
			<view class="item">
				<text class="left">流量卡号</text>
				<text>{{ info.iotCardNo }}</text>
			</view>
			<view class="item">
				<text class="left">二维码编号</text>
				<text>{{ info.originalDeviceCode }}</text>
			</view>
			<view class="item">
				<text class="left">温控装置</text>
				<text v-text="info.deviceType ? info.deviceType : '无'"></text>
			</view>
			<view class="item">
				<text class="left">显示屏</text>
				<text
					v-if="
						info.isColorScreen === 1 && info.isBreakOne === 0 && info.isBreakTwo === 0
					"
				>
					彩屏
				</text>
				<text
					v-else-if="
						info.isColorScreen === 0 && info.isBreakOne === 1 && info.isBreakTwo === 0
					"
				>
					断码屏1
				</text>
				<text
					v-else-if="
						info.isColorScreen === 0 && info.isBreakOne === 0 && info.isBreakTwo === 1
					"
				>
					断码屏2
				</text>
				<text
					v-else-if="
						info.isColorScreen === 0 && info.isBreakOne === 1 && info.isBreakTwo === 1
					"
				>
					断码屏1、断码屏2
				</text>
				<text v-else>无屏</text>
			</view>
			<view class="item">
				<text class="left">泵停压力值</text>
				<text>{{ info.pumpPower }}</text>
			</view>
			<view class="item">
				<text class="left">储罐总容量(吨)</text>
				<text>
					{{ parseFloat((info.capacity / 1000).toFixed(1)) || info.totalCapacity || '-' }}
				</text>
			</view>
			<view class="item">
				<text class="left">液位总高度(cm)</text>
				<text v-text="info.maxLep || info.totalHeight || '-'"></text>
			</view>
			<view class="item" v-if="info.lepchange">
				<text class="left">液位高度变化值(cm)</text>
				<text v-text="info.lepchange > 0 ? info.lepchange : '-'"></text>
			</view>
			<view class="item">
				<text class="left">液位传感器</text>
				<text v-if="info.hasSensor === 1">电压型</text>
				<text v-else-if="info.hasSensor === 2">电流型</text>
				<text v-else>无</text>
			</view>
			<view class="item" v-if="info.hasSensor">
				<text class="left">液位传感器零点电压(mv)</text>
				<text v-text="info.zeroVofLep > 0 ? info.zeroVofLep : '-'"></text>
			</view>
			<view class="item">
				<text class="left">加注流量计</text>
				<text v-text="info.fillType ? info.fillType : '无'"></text>
			</view>
			<view class="item">
				<text class="left">压力传感器</text>
				<text v-text="info.hasPressure === 1 ? '有' : '无'"></text>
			</view>

			<view class="item">
				<text class="left">灯光</text>
				<text v-text="info.hasAdvert === 1 ? '有' : '无'"></text>
			</view>
			<view class="item">
				<text class="left">键盘</text>
				<text v-text="info.hasKeyboard === 1 ? '有' : '无'"></text>
			</view>
			<view class="item">
				<text class="left">读卡器</text>
				<text v-text="info.hasCard === 1 ? '有' : '无'"></text>
			</view>
			<view class="item" v-if="info.backchoice || info.backchoice === 0">
				<text class="left">设备待机页面</text>
				<text v-text="info.backchoice === 0 ? '普通' : '加油站式'"></text>
			</view>
			<view class="item">
				<text class="left">安装人员</text>
				<text>{{ info.staffName }}</text>
			</view>
			<view class="item"><text class="left">设备照片</text></view>
			<view class="item3">
				<image
					class="i"
					mode="center"
					v-for="(item, index) in imgList"
					:key="index"
					:src="item"
					@tap="showImg(item)"
				></image>
			</view>
		</view>

		<!-- 调试信息 -->
		<view class="cardview" v-if="info.macPrecision || info.putTime">
			<view class="title">调试信息</view>
			<view class="item">
				<text class="left">加注流量精度</text>
				<text>{{ info.macPrecision }}</text>
			</view>
			<!-- <view class="item" v-if="info.storagePrecision">
				<text class="left">蓄注流量精度</text>
				<text>{{ info.storagePrecision }}</text>
			</view> -->
			<view class="item">
				<text class="left">单价(元)</text>
				<text>{{ info.ureaPrice }}</text>
			</view>
			<view class="item">
				<text class="left">计量单位</text>
				<text v-text="info.units === 0 ? '升' : 'kg'"></text>
			</view>
			<view class="item">
				<text class="left">灯光开关时间</text>
				<text>{{ info.openTime }}-{{ info.closeTime }}</text>
			</view>
			<view class="item">
				<text class="left">品牌名称</text>
				<text>{{ info.ureaType }}</text>
			</view>
			<view class="item">
				<text class="left">入库时间</text>
				<text v-text="info.putTime ? info.putTime : '暂未入库'"></text>
			</view>
		</view>

		<!-- 客户信息 -->
		<view class="cardview" v-if="macStatus === 2">
			<view class="title">客户信息</view>
			<view class="item">
				<text class="left">所属运营商</text>
				<text>{{ info.operName }}</text>
			</view>
			<view class="item">
				<text class="left">首次启用时间</text>
				<text>{{ info.enableTime }}</text>
			</view>
		</view>

		<!-- 售后记录 -->
		<view
			class="cardview"
			v-if="macStatus === 2"
			@tap="$navigateTo('/pages/service/index?macCode=' + macCode)"
		>
			<view class="item2">
				<text class="left">售后记录</text>
				<view class="arrow_nav"></view>
			</view>
		</view>

		<view
			class="cardview "
			@tap="$navigateTo('/pages/device/runningFault?machineId=' + info.machineId)"
		>
			<view class="item2">
				<text class="left">运行故障</text>

				<view class="u-f-ac">
					<view
						class="fault"
						v-if="firstFaultInfo.faultCode == 'F000' || !firstFaultInfo.faultCode"
					>
						<text style="margin-right: 20rpx;">查看历史</text>
					</view>
					<view class="fault u-f-ac" v-else>
						<view class="code" style="color: #F34141;">
							{{ firstFaultInfo.faultCode }}
						</view>
						<view style="color: #999999;">{{ firstFaultInfo.faultTime }}</view>
					</view>
					<view class="arrow_nav"></view>
				</view>
			</view>
		</view>

		<!-- 提示弹窗 -->
		<view class="_popup center" v-if="showPopup">
			<view class="info">
				<view class="title">提示</view>
				<view class="note">{{ popupNote }}</view>
				<view class="btnview">
					<view class="cancle" @tap="showPopup = false">取消</view>
					<view class="submit" @tap="popupSubmit">确认</view>
				</view>
			</view>
		</view>

		<!-- 底部菜单 -->
		<view class="bottom_blank"></view>
		<view class="bottom_view">
			<!-- 待调试/已入库 -->
			<view class="cont">
				<view class="btn" v-if="macStatus === 0 || macStatus === 1" @tap="showPu(0)">
					<view class="icon-1"></view>
					<text>参数设置</text>
				</view>
				<view class="btn" @tap="scanTest" v-if="macStatus === 0 || macStatus === 1">
					<view class="icon-2"></view>
					<text>扫码调试</text>
				</view>
				<view class="btn2" v-if="macStatus === 0" @tap="showPu(1)">确认入库</view>
				<view class="u-f-jsb">
					<view
						class="btn"
						v-if="macStatus === 2 || macStatus === 3"
						@tap="$navigateTo('/pages/service/add?macCode=' + macCode)"
					>
						<text>设备售后</text>
					</view>
					<view class="btn" v-if="macStatus === 3" @tap="repairFill">
						<text>加注调试</text>
					</view>
				</view>
				<!-- <button class="btn_submit" ></button> -->
			</view>
			<!-- 已售出 -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			macCode: '', //机器码
			macStatus: 0, //机器状态，0-待调试，1-已入库，2-已出售
			info: {}, //信息
			imgList: [], //设备照片
			showPopup: false, //是否显示提示弹窗
			popupNote: '', //提示语
			popupCode: 0, //提示弹窗类型，0-参数设置，1-确认入库
			firstFaultInfo: {} // 最近一次的故障信息
		};
	},
	onLoad(e) {
		this.macCode = e.macCode;
		this.getInfo();
		uni.$on('device_changeCode', this.getInfo);
	},
	onShow() {
		if (this.$store.state.reLogin) {
			this.getInfo();
			this.$store.commit('hasLogin');
		}
	},
	onUnload() {
		uni.$off('device_changeCode', this.getInfo);
	},
	methods: {
		repairFill() {
			if(this.info.isOnline !== 1) {
				return this.$showToast('设备不在线，请开机后再进行调试！');
			}
			this.$navigateTo(
				`/pages/device/scan?macCode=${this.macCode}&ureaPrice=${this.info.ureaPrice}&units=${
					this.info.units
				}&repair=1`
			);
		},
		// 获取故障信息
		getFaultInfo() {
			this.$http({
				url: this.$api.factoryUrl + 'faultlist',
				data: {
					machineId: this.info.machineId,
					page: 1,
					row: 1
				}
			}).then(res => {
				this.firstFaultInfo = res[0] || {};
			});
		},
		//点击图片
		showImg(url) {
			uni.previewImage({
				current: url,
				urls: this.imgList
			});
		},
		//编辑
		editMac() {
			if (!this.info.machineId) {
				this.$showToast('设备状态异常，请重新进入本页面！');
				return;
			}
			this.$store.commit('setTmpData', JSON.stringify(this.info));
			this.$navigateTo('./edit?edit=e');
		},
		//删除
		delMac() {
			if (!this.info.machineId) {
				this.$showToast('设备状态异常，请重新进入本页面！');
				return;
			}
			uni.showModal({
				content: '确认删除本设备吗？',
				success: rs => {
					if (rs.confirm) {
						this.$http({
							url: this.$api.factoryUrl + 'addorupdatedevice',
							data: {
								action: 1,
								machineId: this.info.machineId
							}
						}).then(res => {
							this.$successToast('删除成功！');
							setTimeout(() => {
								uni.$emit('device_delDevice', this.info);
							}, this.$tmp.TIME_SUC);
							this.$sucBack();
						});
					}
				}
			});
		},
		//参数设置
		setCode() {
			this.$store.commit('setTmpData', JSON.stringify(this.info));
			this.$navigateTo('./code');
		},
		//扫码调试
		scanTest() {
			if (this.info.isOnline !== 1) {
				this.$showToast('设备不在线，请开机后重新进入本页面！');
				return;
			}
			if (!this.info.macPrecision || !this.info.ureaType) {
				this.$showToast('请先进行参数设置！');
				return;
			}
			this.$navigateTo(
				'./scan' +
					'?macCode=' +
					this.macCode +
					'&ureaPrice=' +
					this.info.ureaPrice +
					'&units=' +
					this.info.units
			);
		},
		//设备确认入库
		putin() {
			if (!this.info.macPrecision || !this.info.ureaType) {
				this.$showToast('请先进行参数设置！');
				return;
			}
			this.$http({
				url: this.$api.factoryUrl + 'comfirminstorage',
				data: {
					macCode: this.macCode
				}
			}).then(res => {
				this.$successToast('已入库');
				this.macStatus = 1;
				setTimeout(() => {
					this.getInfo();
					uni.$emit('device_macStatusChe', {
						macCode: this.macCode
					});
				}, this.$tmp.TIME_SUC);
			});
		},
		//点击提示弹窗确定按钮
		popupSubmit() {
			this.showPopup = false;
			switch (this.popupCode) {
				case 0:
					this.setCode();
					break;
				case 1:
					this.putin();
					break;
			}
		},
		//显示弹窗
		showPu(code) {
			if (code === 0 && this.info.isOnline !== 1) {
				this.$showToast('设备不在线，请开机后重新进入本页面！');
				return;
			}
			switch (code) {
				case 0:
					this.popupNote = '请确认设备已经通电、网络已经连接！';
					break;
				case 1:
					this.popupNote = '请确认各种参数已配置齐全，调试无误。';
					break;
			}
			this.popupCode = code;
			this.showPopup = true;
		},
		//获取信息
		getInfo(code) {
			code && (this.macCode = code);
			this.$http({
				url: this.$api.factoryUrl + 'getdevicedetail',
				data: {
					macCode: this.macCode
				}
			}).then(res => {
				let extProperty = JSON.parse(res.extProperty || '{}');
				res.capacity = extProperty.capacity || '';
				res.maxLep = parseInt(extProperty.maxLep) || '';
				res.lepchange = extProperty.lepchange || '';
				res.zeroVofLep = extProperty.zeroVofLep || '';
				res.pumpPower = res.pumpPower || '';
				this.info = res || {};
				if (this.info.hasPressure === '') {
					this.info.hasPressure = 0;
				}
				this.imgList = (res.devicePhoto && res.devicePhoto.split(',')) || [];
				this.macStatus = parseInt(res.macStatus);
				this.getFaultInfo();
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	align-items: center;
}
.fault view {
	margin-right: 20rpx;
}
.code {
	max-width: 200rpx;
	overflow: hidden;
}

/* 卡片 */
.cardview {
	width: 730rpx;
	padding: 40rpx 30rpx;
	margin-top: $spacing-col;
	border-radius: $border-radius-bm;
	background-color: $color-white;
	.title {
		width: 100%;
		font-size: 36rpx;
	}
	.title.t2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			flex: 1;
		}
		.btn {
			font-size: 30rpx;
			color: #6798fe;
			flex: 1;
		}
		.btn.b2 {
			margin-left: 50rpx;
			color: #ff0000;
		}
	}
	.item,
	.item2 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			flex: 1;
		}
	}
	.item {
		margin-top: 40rpx;
		.left {
			flex: 1;
			color: $color-grey;
		}
	}
	.item3 {
		width: 100%;
		margin-top: 20rpx;
		.i {
			width: 130rpx;
			height: 130rpx;
			margin-top: 10rpx;
			margin-right: 20rpx;
		}
	}
}

/* 底部菜单 */
.bottom_view .cont {
	width: 100%;
	height: 100%;
	padding:0 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.btn {
		width: 230rpx;
		height: 80rpx;
		margin-right: 16rpx;
		color: $color-white;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: $border-radius-bm;
		background-color: $color-text-primary;
	}
	.icon-1,
	.icon-2 {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}
	.icon-1 {
		background-image: url('http://img.etubang.com/group1/M00/00/43/rBCky16anPmARei4AAAFoN2JsHw014.png');
	}
	.icon-2 {
		background-image: url('http://img.etubang.com/group1/M00/00/43/rBCky16anVCAbA9sAAADaYoPunc401.png');
	}
	.btn2 {
		width: 170rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: 20rpx;
		color: $color-text-primary;
		border-radius: $border-radius-bm;
		border: 1rpx solid $color-text-primary;
	}
}

/* 弹窗 */
._popup.center .info {
	width: 600rpx;
	background-color: $color-white;
	border-radius: $border-radius-bm;
	.title {
		width: 100%;
		margin-top: 36rpx;
		text-align: center;
		font-size: 36rpx;
		color: $color-primary;
	}
	.note {
		width: 100%;
		margin-top: 90rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.btnview {
		width: 100%;
		padding: 20rpx;
		margin-top: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.cancle,
		.submit {
			flex: 1;
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;
			border-radius: $border-radius-bm;
		}
		.cancle {
			background-color: $color-bg;
		}
		.submit {
			margin-left: 20rpx;
			color: $color-white;
			background-color: $color-primary;
		}
	}
}

/* 轮播图 */
._popup {
	.close {
		position: fixed;
		top: 40rpx;
		right: 30rpx;
		width: 37rpx;
		height: 37rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UAFGAbG47AAACr5SBkYk079.png');
	}
}
.swiper {
	position: fixed;
	top: 110rpx;
	width: 750rpx;
	z-index: $z-index-popup-info;
	.img {
		width: 620rpx;
		border-radius: $border-radius-bm;
		transition: all 0.1s ease-in 0s;
	}
}
</style>
